{% extends "admin/base.html" %}

{% load i18n admin_tags %}

{% block title %} Papermerge | Documents {% endblock %}

{% block control_sidebar %}
  <!-- Control sidebar content goes here -->
  <div class="p-3">
    {% csrf_token %}
    <a href="{% url 'core:document_download' document.id %}" class="btn btn-block btn-success download">
      {% trans "Download" %}
    </a>
    <button id="save" type="button" class="btn btn-block btn-light save">
    {% trans "Save" %}</button>
    <div class="form-group mt-2">
      <label for="tags">{% trans "Tags" %}</label>
      <div class="document tags-container d-flex">
        {% for tag in tags %}
          <div style="background: {{tag.bg_color}}; color: {{ tag.fg_color }}; border-color: {{tag.bg_color}}" class="tag d-flex align-items-center">
            <span style="color: {{tag.fg_color}}; margin-right: 0.5rem;">{{ tag.name }}</span>
          </div>
        {% endfor %}
      </div>
    </div>
    <div class="form-group">
      <label for="language">{% trans "Language" %}</label>
      <span class="form-control">{{document.lang}} </span>
    </div>
    <div id="metadata">
    </div>
    <div class="form-group">
      <label for="notes">{% trans "Notes" %}</label>
      <textarea class="form-control" name="notes" rows="3">{{document.notes|default_if_none:""}}</textarea>
    </div>
    <button id="delete" type="button" class="btn btn-block btn-light hover-danger">
      {% trans "Delete" %}
    </button>
  </div>
{% endblock %}

{% block actions %}
<div id="document-actions" class="col-sm-12 d-flex flex-row justify-content-between">
  <div class="d-flex flex-row">
    <button id="sw-left-panel" data-target-id="page-thumbnails" class="btn btn-default btn-flat btn-outline-light">
      <i class="icon-sw-left-panel"></i>
    </button>
    <ul  class="nav nav-pills">
        <li class="mx-1">
            <div class="dropdown actions">
              <button class="btn btn-light btn-light btn-bordered dropdown-toggle" type="button" id="changelist_actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {% trans "Actions" %}
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <li class="dropdown-item">
                    <a href="{% url 'core:document_download' document.id %}"><i class="fa fa-download mx-2"></i>{% trans "Download" %}</a>
                  </li>
                  <li class="dropdown-item disabled" id="rename" data-target-id="rename-form" disabled>
                    <a><i class="fa fa-edit mx-2"></i>{% trans "Rename" %}</a>
                  </li>
                  <li class="dropdown-item fl fl-i-center" id="delete-page" class="dropdown-item fl fl-i-center disabled">
                     <a><i class="fa fa-trash mx-2"></i>{% trans "Delete Page" %}</a>
                  </li>
                 
                 <li class="dropdown-divider"></li>
                 <li class="dropdown-item disabled" id="cut-page">
                     <a><i class="fa fa-cut mx-2"></i>{% trans "Cut" %}</a>
                 </li>
                 <!-- PASTE -->
                 <li class="dropdown-item disabled" id="paste-page">
                     <a><i class="fa fa-paste mx-2"></i>{% trans "Paste" %}</a>
                 </li>
                 <!-- PASTE -->
                 <li id="tags-menu-item" class="dropdown-item disabled">
                     <a><i class="fa fa-tag mx-2"></i>{% trans "Tags" %}</a>
                 </li>
                 <li class="dropdown-divider"></li>
                 <li id="apply-reorder-changes" class="dropdown-item disabled">
                     <a><i class="fa fa-download mx-2 "></i>{% trans "Apply Reorder Changes" %}</a>
                 </li>
              </ul>
            </div>
        </li>
    </ul>
  </div>
  <div>
    <select class="zoom" select="width">
        <option value="width">Fit Width</option>
        <option value="50">50%</option>
        <option value="75">75%</option>
        <option value="100">100%</option>
        <option value="125">125%</option>
        <option value="150">150%</option>
    </select>
  </div>
</div>
{% endblock %}

{% block breadcrumb %}
    <div id="breadcrumb" class="col-sm-12">
    </div><!-- /.col -->
{% endblock %}

{% block modals %}
    {% include 'admin/_forms.js.html' %}
{% endblock modals %}


{% block content %}
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
        <div id="document">
          <div id="viewer" class="d-flex flex-row">
            <div id="page-thumbnails">
              {% include 'admin/_page_thumbnails.html' with pages=pages document=document %}
            </div>
            <div id="actual-pages">
              {% include 'admin/_pages.html' with pages=pages %}
            </div>
          </div>
        </div>
    </div>
  </div>
  <!-- /.row -->
</div><!-- /.container-fluid -->

<input type="hidden" name="document_id" value="{{document.id}}" />
{% endblock %}